JS-Win





1.Alerte avec bouton


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<button onclick="afficherAlerte()">Clique-moi</button>

<script>
function afficherAlerte() {
  alert("Bonjour 🚨");
}
</script>

</body>
</html>

2.Demander le nom et l'afficher.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<input type="text" id="nom" placeholder="Ton nom">
<button onclick="afficherNom()">Valider</button>

<p id="resultat"></p>

<script>
function afficherNom() {
  let nom = document.getElementById("nom").value;
  document.getElementById("resultat").textContent = "Bonjour " + nom;
}
</script>

</body>
</html>

3.Compter le nombre de lettres


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<input type="text" id="mot" placeholder="Un mot">
<button onclick="compter()">Compter</button>

<p id="res"></p>

<script>
function compter() {
  let mot = document.getElementById("mot").value;
  document.getElementById("res").textContent = mot.length;
}
</script>

</body>
</html>

4.Compte à rebours de 10 à 0


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1 id="c">10</h1>
<button onclick="start()">Démarrer</button>

<script>
let n = 10;
function start() {
  let i = setInterval(() => {
    document.getElementById("c").textContent = n;
    if (n === 0) {
      clearInterval(i);
    } else {
      n--;
    }
  }, 1000);
}
</script>

</body>
</html>

5.Tableau


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<button onclick="afficher()">Afficher</button>
<ul id="liste"></ul>

<script>
let tab = ["HTML", "CSS", "JS"];

function afficher() {
  let ul = document.getElementById("liste");
  ul.innerHTML = "";
  tab.forEach(e => {
    let li = document.createElement("li");
    li.textContent = e;
    ul.appendChild(li);
  });
}
</script>

</body>
</html>

6.To-Do List


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<input id="tache">
<button onclick="add()">Ajouter</button>
<ul id="list"></ul>

<script>
function add() {
  let li = document.createElement("li");
  li.textContent = document.getElementById("tache").value;
  document.getElementById("list").appendChild(li);
}
</script>

</body>
</html>

7.Calcule de la racine carrée


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<input type="number" id="n" placeholder="calcule de racine carrée.">
<button onclick="calc()">Calculer</button>
<p id="r"></p>

<script>
function calc() {
  let n = document.getElementById("n").value;
  document.getElementById("r").textContent = Math.sqrt(n);
}
</script>

</body>
</html>

8.Changer la couleur d'un texte


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p id="txt">Couleur magique</p>
<button onclick="color()">Changer</button>

<script>
function color() {
  document.getElementById("txt").style.color = "red";
}
</script>

</body>
</html>

9.Afficher/Cacher un élément


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p id="p">Je suis visible</p>
<button onclick="toggle()">Toggle</button>

<script>
function toggle() {
  let p = document.getElementById("p");
  p.style.display = p.style.display === "none" ? "block" : "none";
}
</script>

</body>
</html>

10.Compteur au clique.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<button onclick="inc()">Clique</button>
<p id="c">0</p>

<script>
let x = 0;
function inc() {
  x++;
  document.getElementById("c").textContent = x;
}
</script>

</body>
</html>
©Tous droits réservés || Gouba kirbouré Godwin -2026.

NB:⚠️Le site ne demande aucune donnée de l'utilisateur. 2.jpg